<template>
    <view :class="themeName">
        <u-tabs
            font-size="28"
            name="tabsName"
            inactive-color="#333"
            :active-color="themeColor"
            :list="list"
            :is-scroll="false"
            :current="current"
            @change="change"
        >
        </u-tabs>

        <mescroll-uni
            ref="mescrollRef"
            bgColor="white"
            top="90rpx"
            @init="mescrollInit"
            :down="downOption"
            :up="upOption"
            @down="downCallback"
            @up="upCallback"
        >
            <view
                class="bg-white p-24 m-b-16"
                @click="goPage('/bundle/pages/after_sale_detail/after_sale_detail', item.sub_id)"
                v-for="(item, index) in lists"
                :key="index"
            >
                <!-- item头部 -->
                <view class="header nr p-b-24 flex row-between">
                    <text>申请时间：{{ item.create_time }}</text>
                    <text>{{ item.refund_method_desc }}</text>
                </view>

                <!-- 商品信息 -->
                <view class="m-t-20 bg-white flex">
                    <u-image
                        :src="
                            item.goods_snap.item_image
                                ? item.goods_snap.item_image
                                : item.goods_snap.image
                        "
                        width="180rpx"
                        height="180rpx"
                        mode="aspectFill"
                    ></u-image>
                    <view class="m-l-24" style="width: 100%">
                        <view class="nr line-2 m-b-20">
                            {{ item.goods_snap.goods_name }}
                        </view>
                        <view class="xs muted flex row-between">
                            <price
                                class="m-r-12"
                                :content="item.goods_price"
                                color="#101010"
                                mainSize="28rpx"
                                minorSize="26rpx"
                            ></price>

                            <text>X {{ item.goods_snap.goods_num }}</text>
                        </view>
                    </view>
                </view>

                <view class="apply-ststus lighter nr m-t-20">
                    {{ item.sub_status_desc }}
                </view>

                <view class="footer bg-white p-t-20">
                    <view class="flex row-right">
                        <view
                            class="br60 btn inline m-l-24"
                            @click.stop="openCancel(index)"
                            v-if="item.btns.cancel_btn"
                        >
                            撤销申请
                        </view>

                        <view
                            class="br60 btn inline m-l-24"
                            @click.stop="
                                goPage(
                                    '/bundle/pages/input_express_info/input_express_info',
                                    item.master_id
                                )
                            "
                            v-if="item.btns.express_btn"
                        >
                            填写快递单号
                        </view>

                        <view
                            class="br60 btn inline m-l-24"
                            @click="
                                goPage(
                                    '/bundle/pages/post_after_sale/post_after_sale',
                                    item.order_goods_id
                                )
                            "
                            v-if="item.btns.reapply_btn"
                        >
                            重新申请
                        </view>
                    </view>
                </view>
            </view>
        </mescroll-uni>

        <u-modal
            v-model="showCancel"
            width="540"
            :confirm-style="{ 'border-left': '1rpx solid #e5e5e5' }"
            @confirm="cancelApplyFun"
            :showCancelButton="true"
            :show-title="false"
            @cancel="showCancel = false"
            confirm-text="确定"
            cancel-color="#999999"
            confirm-color="#101010"
            border-radius="10"
        >
            <view class="flex row-center m-t-24" style="color: #101010; font-size: 30rpx">
                提示
            </view>
            <view style="margin: 40rpx 30rpx" class="md muted">是否要撤销申请？？</view>
        </u-modal>
    </view>
</template>

<script>
// +----------------------------------------------------------------------
// | LikeShop100%开源免费商用电商系统
// +----------------------------------------------------------------------
// | 欢迎阅读学习系统程序代码，建议反馈是我们前进的动力
// | 开源版本可自由商用，可去除界面版权logo
// | 商业版本务必购买商业授权，以免引起法律纠纷
// | 禁止对系统程序代码以任何目的，任何形式的再发布
// | Gitee下载：https://gitee.com/likeshop_gitee/likeshop
// | 访问官网：https://www.likemarket.net
// | 访问社区：https://home.likemarket.net
// | 访问手册：http://doc.likemarket.net
// | 微信公众号：好象科技
// | 好象科技开发团队 版权所有 拥有最终解释权
// +----------------------------------------------------------------------
// | Author: LikeShopTeam
// +----------------------------------------------------------------------
import { apiAfterSaleList, apiAfterSaleCancel } from '@/api/order.js'
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js'
import MescrollMoreItemMixin from '@/components/mescroll-uni/mixins/mescroll-more-item.js'
export default {
    mixins: [MescrollMixin, MescrollMoreItemMixin],
    data() {
        return {
            showCancel: false, //撤销申请的弹窗
            master_id: '', //撤销申请的ID

            list: [
                {
                    tabsName: '售后中',
                    isShow: true,
                    type: 'status_ing'
                },
                {
                    tabsName: '售后完成',
                    isShow: false,
                    type: 'status_success'
                },
                {
                    tabsName: '售后失败',
                    isShow: false,
                    type: 'status_fail'
                }
            ],
            current: 0,
            lists: [],

            downOption: {
                auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
            },
            upOption: {
                auto: true, // 不自动加载
                noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
                empty: {
                    icon: '/static/images/empty/order.png',
                    tip: '暂无售后数据', // 提示
                    fixed: true,
                    top: '200rpx'
                }
            }
        }
    },

    methods: {
        change(index) {
            for (let i = 0; i < this.list.length; i++) {
                this.list[i].isShow = false
            }
            this.current = index
            this.upCallback({
                num: 1,
                size: 10
            })
            this.list[index].isShow = true
        },

        upCallback(page) {
            let num = page.num
            let size = page.size

            apiAfterSaleList({
                type: this.list[this.current].type,
                page_no: num,
                page_size: size
            })
                .then((res) => {
                    if (page.num == 1) this.lists = [] //如果是第一页需手动置空列表
                    this.lists = this.lists.concat(res.lists) //追加新数据
                    this.mescroll.endSuccess(res.lists.length, res.count)
                })
                .catch((err) => {
                    this.mescroll.endErr()
                })
        },

        openCancel(index) {
            this.showCancel = true
            this.master_id = this.lists[index].master_id
        },

        // 撤销审核
        cancelApplyFun() {
            apiAfterSaleCancel({ id: this.master_id }).then((res) => {
                this.upCallback({
                    num: 1,
                    size: 10
                })
                this.$toast({ title: '取消成功' })
            })
        },

        // 去填写快递单号
        goPage(url, id) {
            this.$Router.push({
                path: url,
                query: {
                    id: id
                }
            })
        }
    },

    onShow() {
        this.upCallback({
            num: 1,
            size: 10
        })
    }
}
</script>
<style lang="scss">
.apply-ststus {
    border-radius: 6px;
    background: #f6f6f6;
    padding: 20rpx 40rpx;
}

.btn {
    padding: 10rpx 40rpx;
    border-width: 1rpx;
    border-style: solid;
    @include font_color();
    @include border_color();
}
</style>
